<template>
  <div class="errorpage"   ref="bgstar" id="bgstar"  @click="gotowhere('login')"  >
       <div class="dao">
          <el-progress 
           type="circle" 
          :percentage="percentage" 
          :width="70"
          show-text

          ></el-progress>
      </div>
      <img :src="image" alt="" class="mimg">
      <span
          v-for="(l,i) in spanNum" 
          :key="i"
          class="spandot"
          :style="{
            left:l.x+'px',
            top:l.y+'px',
            transform:'scale('+l.scaler+')',
            background:l.rgb,
            animationDelay:l.rate + 's'
          }"
        >
      </span>
      
  </div>
</template>

<script>
import image from "@/assets/images/404.png"
import {reactive,toRefs,onMounted,ref,onUnmounted} from "vue"
import {useRouter} from "vue-router"
var timer = null;
export default {
  name:"notfound",
  setup(){
      const router = useRouter()
      const bgstar = ref()
      const state = reactive({
        image,
        spanNum:[],
        percentage:0
      })
      const spanInit = ()=>{
         var maxWidth = bgstar.value.clientWidth;
         var maxHeight = document.getElementById("bgstar").clientHeight;

         for(var i=0;i<520;i++){
          //  随机位置
           var x = Math.floor(Math.random()* maxWidth) ;
           var y = Math.floor(Math.random()* maxHeight) ;

          //  随机大小
          var scaler = Math.random() * 1.5;

          // 随机频率  S 
          var rate = Math.random() * 2.5 ;  

          // 随机的颜色
          var r = Math.floor(Math.random() * 255 );
          var g = Math.floor(Math.random() * 255 );
          var b = Math.floor(Math.random() * 255 );
          var opc = Math.random() * 1;
          state.spanNum.push({
              x,
              y,
              scaler,
              rate,
              rgba:`rgba(${r},${g},${b},${opc})`,
              rgb:`rgb(${r},${g},${b})`
          })
         }
      }

      onMounted(()=>{
        spanInit()
        timer = setInterval(()=>{
          if(state.percentage<100){
            state.percentage+=5;
          }else{
            clearInterval(timer)
            timer = null;
            router.push({name:'login'})
          }
        },10)

        onUnmounted(()=>{
          console.log("onUnmounted")
          clearInterval(timer)
          timer = null;
        })
      })
      return {
        ...toRefs(state),
        bgstar
      }
  }
}
</script>


<style lang="scss" scoped >
.errorpage{
  width:100%;
  height:100%;
  background: #000;
  position: relative;
  overflow: hidden;
  .mimg{
    width:260px;
    height:280px;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
  }
  .dao{
    position: absolute;
    z-index: 200;
    right:20px;
    top:20px;
  }
  .spandot{
    position: absolute;
    z-index: 100;
    width: 4px;
    height:4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;

  }
   @keyframes flash {
        from{
            opacity: 0;
        }
        to{
            opacity: 0.5;
        }
    }
}
</style>

